<template>
  <view class="login-container">
    <view class="login-card">
      <text class="login-title">ERP 登录</text>
      <view class="form-group">
        <label for="username">用户名</label>
        <input type="text" v-model="username" placeholder="请输入用户名" />
      </view>
      <view class="form-group">
        <label for="password">密码</label>
        <input type="password" v-model="password" placeholder="请输入密码" />
      </view>
      <view class="form-actions">
        <button @click="login" size="mini">登录</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    async login() {
      const res = await this.$myRuquest({
        url: '/index/plugin.users/login',
        method: 'POST',
        data: {
          username: this.username,
          password: this.password,
        },
      });
      if (res.data.code === 200) {
        uni.setStorageSync('token', res.data.token);
        uni.setStorageSync('userInfo', JSON.stringify(res.data.userInfo));
        this.$bus.$emit('login');
        this.$router.push({ path: '/' });
      } else {
        uni.showToast({
          title: res.data.message,
          icon: 'none',
          duration: 2000,
        });
      }
    },
  },
};
</script>

<style>
.login-container {
  background-image: url('@/static/login.png');
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.login-card {
	padding-top: 20px;
  background-color: rgba(255, 255, 255, 0.9);
  padding-left: 20px;
  padding-right: 40px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 300px;
  text-align: center;
}

.login-title {
  font-size: 24px;
  margin-bottom: 20px;
  color: #34495e;
}

.form-group {
  margin-bottom: 15px;
  text-align: left;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  color: #666;
}

.form-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  outline: none;
}

.form-actions {
  margin-top: 20px;
  
}

button {
  background-color: #4cd964;
  color: #fff;
  border: none;
  padding: 8px 8px;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
  margin-left: 8px;
  margin-bottom: 18px;
}

button:hover {
  background-color: #45c853;
}
</style>
